<template>
    <view v-if="showClone" :class="'tab-bar tab-bar-' + position" :style="'background: ' + (backgroundImg ? 'url(+ backgroundImg+ )' : backgroundColor)">
        <view class="tab-bar-border" :style="'background: ' + borderStyle"></view>
        <view
            :class="'tab-bar-item ' + (item.style === 'circle' ? 'circle' : '')"
            :data-path="item.pagePath"
            :data-index="idx"
            mut-bind:tap="switchTab"
            v-for="(item, idx) in list"
            :key="idx"
        >
            <view v-if="item.style === 'circle'" class="item-circle"></view>

            <image
                class="tab-bar-item-image"
                v-if="item.style !== 'circle'"
                :style="'height: ' + item.iconSize + 'rpx; width: ' + item.iconSize + 'rpx'"
                :src="selectedClone === idx ? item.selectedIconPath : item.iconPath"
            ></image>

            <image v-else class="tab-bar-item-image"></image>

            <image class="center-circle" v-if="item.style === 'circle'" :src="selectedClone === idx ? item.selectedIconPath : item.iconPath"></image>

            <view :style="'font-size: ' + fontSize + 'rpx ;color: ' + (selectedClone === idx ? selectedColor : color)">{{ item.text }}</view>

            <view v-if="item.redDot" class="reddot"></view>

            <view v-if="item.badge" class="badge">{{ item.badge }}</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showClone: '',
            selectedClone: ''
        };
    },

    props: {
        position: {
            type: String,
            default: 'bottom'
        },
        show: {
            type: Boolean,
            default: true
        },
        selected: {
            type: Number,
            default: 0
        },
        color: {
            type: String,
            default: '#707070'
        },
        selectedColor: {
            type: String,
            default: '3963BC'
        },
        borderStyle: {
            type: String,
            default: '#f6f6f6'
        },
        backgroundColor: {
            type: String,
            default: '#fff'
        },
        backgroundImg: {
            type: String,
            default: ''
        },
        fontSize: {
            type: Number,
            default: 24
        },
        isRedirectToTab: {
            type: Boolean,
            default: true
        },
        isNav: {
            type: Boolean,
            default: true
        },
        list: {
            type: Array,
            default: () => []
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    methods: {
        attached() {},

        switchTab(t) {
            const e = t.currentTarget.dataset;
            const a = e.path;
            if (this.isNav) {
                this.isRedirectToTab;
                uni.switchTab({
                    url: a
                });
            }
            this.showItem(e.index);
        },

        show() {
            this.setData({
                showClone: true
            });
        },

        hide() {
            this.setData({
                showClone: false
            });
        },

        showItem(t) {
            this.setData({
                selectedClone: t
            });
            let e = {
                idx: t,
                path: this.route
            };
            this.$emit(
                'lintap',
                {
                    detail: e
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        },

        showRedDot(t) {
            const e = `list[${t}].redDot`;
            this.setData({
                [e]: true
            });
        },

        hideRedDot(t) {
            const e = `list[${t}].redDot`;
            this.setData({
                [e]: false
            });
        },

        setTabBarBadge(t, e) {
            const a = `list[${t}].badge`;
            this.setData({
                [a]: e
            });
        },

        removeTabBarBadge(t) {
            const e = `list[${t}].badge`;
            this.setData({
                [e]: ''
            });
        }
    },

    created: function () {}
};
</script>
<style>
.tab-bar {
    position: relative;
    height: 110rpx;
    width: 750rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    background-position: center center;
    background-size: 100% 100%;
    padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-bottom {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
}
.tab-bar-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 1rpx;
    background: #f6f6f6;
    box-shadow: 0 -1px 3px 1px #f6f6f6;
}
.tab-bar-item {
    position: relative;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.item-circle {
    width: 120rpx;
    height: 60rpx;
    background-color: #fff;
    border-radius: 200rpx 200rpx 0 0;
    border-bottom: none;
    background: #fff;
    position: absolute;
    top: -40rpx;
    box-shadow: 0 -1px 1px 0 #f6f6f6;
}
.tab-bar-item-image {
    width: 64rpx;
    height: 64rpx;
}
.tab-bar-item view {
    font-size: 24rpx;
}
.reddot {
    height: 20rpx;
    width: 20rpx;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 15rpx;
    margin-left: 25rpx;
}
.badge {
    height: 32rpx;
    line-height: 32rpx;
    padding: 0rpx 6rpx;
    background: red;
    border-radius: 16rpx;
    position: absolute;
    font-size: 18rpx;
    color: #fff;
    top: 10rpx;
    margin-left: 25rpx;
    box-sizing: border-box;
}
.center-circle {
    height: 100rpx;
    width: 100rpx;
    border-radius: 50%;
    position: absolute;
    top: -30rpx;
}
</style>
